<template>
  <q-page class="q-pa-md">
    <q-btn-group spread>
      <q-btn color="primary" label="调用接口" @click="getUserInfo" />
      <q-btn color="primary" label="增加数据" @click="addUser" />
      <q-btn color="primary" label="修改数据" @click="updateUser" />
      <q-btn color="primary" label="获取数据" @click="getUser" />
      <q-btn color="primary" label="删除数据" @click="deleteUser" />
      <q-btn color="primary" label="恢复数据" @click="restore" />
      <q-btn color="primary" label="获取打印机" @click="getPrinter" />
      <q-btn color="primary" label="跳转测试" @click="goTestPage" />
    </q-btn-group>

    <q-card class="my-card">
      <q-card-section>
        {{ content }}
      </q-card-section>
    </q-card>

    <q-input v-model="textMessage" label="更改内容输入" />
  </q-page>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { IndexedDB } from '../indexedDb/index';
import { useQuasar } from 'quasar';
import { useRouter } from 'vue-router';

defineOptions({
  name: 'IndexPage',
});

const router = useRouter();

function goTestPage() {
  router.push('/test');
}

const $q = useQuasar();
const content = ref('获取中...!');
const textMessage = ref();

const db = new IndexedDB();

window.httpApi.loginBeforeApi((value: any) => {
  const data = JSON.parse(value || '{}');
  content.value = data;
  db.updateUser(data.data); // 从数接口获取数据，并存入indexedDB
});

const getUserInfo = () => {
  content.value = '获取中...!';
  window.httpApi.getUserInfo();
};

const addUser = () => {
  db.addUser('1', { name: '测试数据' });
  $q.dialog({ title: '增加成功！' });
};

const updateUser = () => {
  db.updateUser({
    content: textMessage.value,
  });
  $q.dialog({ title: '修改成功！' });
};

const getUser = async () => {
  const data = await db.getUser('1');
  if (data !== undefined) {
    console.log('===========>获取数据', data);
    return;
  }
  console.log('===========>数据不存在');
};

const deleteUser = () => {
  db.deleteUser('1');
  $q.dialog({ title: '删除成功！' });
};

const restore = () => {
  db.restoreUserTable();
  $q.dialog({ title: '恢复成功！' });
};

interface PrinterInfo {
  name: string; // - 操作系统理解的打印机名称。
  displayName: string; // - 打印预览中显示的打印机名称。
  description: string; // - 任务描述。
  status: number; // - 打印机的当前状态。
  isDefault: boolean; //  - 是否将此的打印机设置为操作系统的默认打印机。
}

const getPrinter = async () => {
  const list: PrinterInfo[] = await window.electronAPI.getPrinter();
  if (list?.length) {
    const printerItem = list.find((item) => item.isDefault); // 获取默认打印机
    // 打印当前网页
    // https://www.electronjs.org/zh/docs/latest/api/web-contents#contentsgetprintersasync
    window.electronAPI.setPrinter({
      silent: true, // boolean （可选） - 不询问用户打印设置。默认值为 false。
      // printBackground: true, // 布尔值（可选）- 打印网页的背景颜色和图像。默认值为 false。
      deviceName: printerItem?.name, // string (optional) - Set the printer device name to use. Must be the system-defined name and not the 'friendly' name, e.g 'Brother_QL_820NWB' and not 'Brother QL-820NWB'.
      // color boolean （可选） - 设置打印的网页是彩色还是灰度。默认值为 true。
      margins: {
        // marginType 字符串（可选）- 可以是 default、none、printableArea 或 custom。如果选择了 custom，则还需要指定 top、bottom、left 和 right。
        // top number （可选） - 打印网页的上边距，以像素为单位。
        // bottom number （optional） - 打印网页的下边距，以像素为单位。
        // left number （可选） - 打印网页的左边距，以像素为单位。
        // right number （optional） - 打印网页的右边距，以像素为单位。
      },
      landscape: true, // boolean （可选） - 是否应以横向模式打印网页。默认值为 false。
      // scaleFactor number （可选） - 网页的比例因子。
      // pagesPerSheet number （可选） - 每个页面工作表要打印的页数。
      // collate boolean （可选） - 是否应整理网页。
      // copies number 份数（可选）- 要打印的网页份数。
      // pageRanges: { // Object[] (可选) - 要打印的页面范围。 在macOS上，只有数组的第一个值被
      // from number - 要打印的第一页的索引（从 0 开始）。
      // to number - 要打印的最后一页的索引（含）（从 0 开始）。
      // },
      // duplexMode 字符串（可选）- 设置打印网页的双工模式。可以是 simplex、shortEdge 或 longEdge。
      // dpi: { Record<string, number> (optional)
      //   horizontal number (optional) - The horizontal dpi.
      //   vertical number (optional) - The vertical dpi.
      // },
      header: '测试打印机header', // string （optional） - 要打印为页眉的字符串。
      footer: '测试打印机footer', //  string (optional) - 页脚字符串 （可选） - 要打印为页面页脚的字符串。
      pageSize: 'A6', // 字符串 |大小（可选）- 指定打印文档的页面大小。可以是 A0、A1、A2、A3、A4、A5、、法A6律、信件、小报或包含高度和宽度的对象。
    });
  }
};
</script>
